<template>
  <q-dialog v-model="isReimDetail" persistent>
    <q-layout view="hHh Lpr fFf" container class="bg-grey-2 hide-scrollbar">
      <q-header class="bg-primary shadow-7">

          <q-toolbar>
              <q-toolbar-title>报销详情</q-toolbar-title>
              <q-space />

              <q-btn dense flat icon="close" @click="trigerUpdate('close')">
              </q-btn>
          </q-toolbar>

      </q-header>
      <q-page-container>
          <q-page  class="bg-white hide-scrollbar">

          <div class="column  q-pa-sm" >
            <div class="text-grey-8 column">
              <div class="text-subtitle1 q-mb-sm">报销类型：{{ reiminfo.type }}</div>
              <div v-if="reiminfo.type=='项目报销'" class="text-subtitle1 q-mb-sm">所属项目：{{ reiminfo.name }}</div>

              <div class="text-subtitle1 q-mb-sm">报销单号：{{ reiminfo.frid }}</div>
              <div class="text-subtitle1 q-mb-sm">
                报销原因：{{ reiminfo.remark }}
              </div>
              <div class="text-subtitle1 q-mb-sm">
                费用发生时间：{{ reiminfo.fundtime }}
              </div>
              <div class="text-subtitle1 q-mb-sm">申请时间：{{ reiminfo.ctime }}</div>
              <div class="text-subtitle1 q-mb-sm">
                报销金额：{{ reiminfo.amount }}元
              </div>
              <div class="text-subtitle1 q-mb-sm">
                报销说明：{{ reiminfo.content ? reiminfo.content : "暂无" }}
              </div>
              <div class="text-subtitle1 q-mb-sm">
                附件
                <q-card flat bordered class="q-pa-sm row">
                  <div v-for="(item, index) in reiminfo.appendix" :key="index">
                    <q-img
                      :ref="'photo' + index"
                      :src="serveurl + item"
                      spinner-color="white"
                      class="q-ml-md"
                      style="height: 100px;width: 100px"
                      @click="handlepreview(serveurl + item)"
                    />
                  </div>
                </q-card>
              </div>
            </div>
          </div>
          <div class="column q-mt-sm q-pa-md" style="background-color: white">
            <div class="text-h6 q-mb-sm">审批详情</div>
            <div class="text-grey-8 column">
              <div class="text-subtitle1 q-mb-sm">
                审批状态：
                <q-badge
                  v-if="reiminfo.status == 0"
                  color="orange-6"
                  outline
                  class="q-ml-sm q-pa-sm q-mr-sm"
                >
                  待审核
                </q-badge>
                <q-badge
                  v-if="reiminfo.status == 1"
                  color="green"
                  outline
                  class="q-ml-sm q-pa-sm q-mr-sm"
                >
                  已通过
                </q-badge>
                <q-badge
                  v-if="reiminfo.status == 2"
                  color="red"
                  outline
                  class="q-ml-sm q-pa-sm q-mr-sm"
                >
                  已拒绝
                </q-badge>
              </div>
              <div class="text-subtitle1 q-mb-sm">审批单号：{{ reiminfo.foid }}</div>
              <div class="text-subtitle1 q-mb-sm">
                转账流水单号：{{ reiminfo.payorderid }}
              </div>
              <div class="text-subtitle1 q-mb-sm">审批时间：{{ reiminfo.ptime }}</div>
              <div class="text-subtitle1 q-mb-sm">
                审批人：{{ reiminfo.pusername }}
              </div>
              <div v-if="reiminfo.status == 2" class="text-subtitle1 q-mb-sm">
                拒绝说明：{{ reiminfo.reason ? reiminfo.reason : "暂无" }}
              </div>
            </div>
          </div>
          <q-dialog
            v-model="dialog"
            persistent
            :maximized="maximizedToggle"
            transition-show="slide-up"
            transition-hide="slide-down"
          >
          <q-layout view="hHh Lpr fFf" container class="bg-grey-2 hide-scrollbar">
            <q-header class="bg-primary shadow-7">

                <q-toolbar>

                    <q-space />

                    <q-btn
                    dense
                    flat
                    icon="minimize"
                    @click="maximizedToggle = false"
                    :disable="!maximizedToggle"
                  >
                    <q-tooltip
                      v-if="maximizedToggle"
                      content-class="bg-white text-primary"
                      >最小化</q-tooltip
                    >
                  </q-btn>
                  <q-btn
                    flat
                    icon="crop_square"
                    @click="maximizedToggle = true"
                    :disable="maximizedToggle"
                  >
                    <q-tooltip
                      v-if="!maximizedToggle"
                      content-class="bg-white text-primary"
                      >最大化</q-tooltip
                    >
                  </q-btn>
                  <q-btn  flat icon="close" v-close-popup>
                    <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
                  </q-btn>

                </q-toolbar>

            </q-header>
            <q-page-container>
                <q-page padding class=" hide-scrollbar">






                      <q-img
                        :src="curphoto"
                        class="fixed-full"
                        contain
                        style="margin-top:50px"
                      />




                </q-page>
            </q-page-container>

        </q-layout>


          </q-dialog>

          </q-page>
      </q-page-container>

  </q-layout>



  </q-dialog>
</template>
<script>
import { date } from "quasar";
import { getreimdetail } from "assets/api/app";
export default {
  name: "ReimDetail",
  props:{
      isReimDetail:{
        default:false
      },
      frid:{
        default:''
      }
  },
  data() {
    return {
      serveurl: "",
      reiminfo: {},
      dialog: false,
      maximizedToggle: true,
      curphoto: "",
    };
  },
  watch:{
    isReimDetail:function(val){
      if(val){
        this.serveurl = this.GLOBAL.serveurl;
    this.loadreiminfo();
      }
    }
  },
  created() {

  },
  methods: {
    trigerUpdate(val){
        this.$emit('update',val)
    },

    handlepreview(item) {
      console.log(item);
      this.dialog = true;
      this.curphoto = item;
    },
    loadreiminfo() {
      let reqdata = {
        frid: this.frid,
      };
      getreimdetail(reqdata).then((res) => {
        console.log(res);
        let data = res.data.data[0];
        let photos = JSON.parse(data.appendix);
        data.appendix = photos;
        data.ptime = date.formatDate(data.ptime, "YYYY-MM-DD HH:mm:ss");
        data.ctime = date.formatDate(data.ctime, "YYYY-MM-DD HH:mm:ss");
        this.reiminfo = data;
      });
    },
  },
};
</script>
